<template>
  <div>
    <div class="handel-header">
      <el-popover
        v-model="showPopover"
        placement="top"
        width="700"
        style="padding: 0 !important;"
        trigger="click">
        <crm-add-contract
          v-if="showSelectView"
          ref="crmaddcontract"
          :show="showPopover"
          crm-type="contacts"
          @close="showPopover=false"
          @getContactsList="getContactsList"/>
        <el-button
          slot="reference"
          style="float: right;"
          type="primary"
          @click="closeaddcont">添加联系人</el-button>
      </el-popover>
    </div>
    <el-table
      :data="contactsList"
      >
      <el-table-column
        prop="name"
        label="姓名"/>
      <el-table-column
        prop="mobile"
        label="手机"/>
      <el-table-column
        prop="post"
        label="职务"/>
      <el-table-column
        prop="是否关键决策人"
        label="是否关键决策人"/>
      <el-table-column
        prop="next_time"
        label="下次联系时间"/>
      <el-table-column
        prop="remark"
        label="备注"/>
      <el-table-column
        prop="telephone"
        label="电话"/>
      <el-table-column
        prop="email"
        label="电子邮箱"/>
      <el-table-column
        prop="address"
        label="地址"/>
      <el-table-column
        prop="性别"
        label="性别"/>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="removeItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script type="text/javascript">
import CrmAddContract from '@/components/CreateCom/CrmAddContract'
export default {
  name: 'XhCustomer',
  components: {
    CrmAddContract
  },
  props: {
    index: {
      type: Number,
      default: ''
    },
    item: {
      type: Object
    },
    action: {
      type: Object,
      default: () => {
        return {
          type: 'default',
          data: {}
        }
      }
    }
  },
  data() {
    return {
      showPopover: false, // 展示新增联系人框
      showSelectView: false, // 内容
      contactsList: JSON.parse(JSON.stringify(this.item.data.value.customerContacts).replace(/nextTime/g, 'next_time')) ? JSON.parse(JSON.stringify(this.item.data.value.customerContacts).replace(/nextTime/g, 'next_time')) : [],
      subContaList: JSON.parse(JSON.stringify(this.item.data.value.customerContacts).replace(/nextTime/g, 'next_time')) ? JSON.parse(JSON.stringify(this.item.data.value.customerContacts).replace(/nextTime/g, 'next_time')) : []
    }
  },
  watch: {
  },
  methods: {
    // 删除操作
    removeItem(index) {
      this.contactsList.splice(index, 1)
      this.subContaList.splice(index, 1)
      this.$emit('value-change', {
        index: this.index,
        value: this.contactsList
      })
    },
    getContactsList(data) {
      const oneData = data.datas.entity
      for (let i = 0; i < data.datas.field.length; i++) {
        const name = data.datas.field[i].name
        oneData[name] = data.datas.field[i].value
      }
      this.contactsList.push(oneData)
      this.subContaList.push(data.datas)
      this.$emit('value-change', {
        index: this.index,
        value: this.contactsList
      })
    },
    closeaddcont() {
      this.showSelectView = true
      if (this.$refs.crmaddcontract) {
        this.$refs.crmaddcontract.resetForm('crmForm')
      }
    }
  }
}
</script>

<style scoped>

</style>
